/* 
 * Javascript for sqpoll.
 * @author Younggue Bae 
 */


/**
 * Generates the html to define a question form.
 * 
 * @param question the json object of question
 * @param msg the json object of message
 */
function getQuestionDefinitionHtml(question, msg) {	
	
	var closeDate = formatDate(addDay(new Date(), 7), "yyyy-MM-dd");
	
	var html = '';
	html += '<div id="questionDefinition">';
	html += '	<fieldset data-role="controlgroup" data-type="horizontal">';
	//html += '		<label for="question">' + msg.question + ':</label>';
	html += '		<table>';
	html += '			<tr>';
	html += '				<td width="99%">';
	html += '					<textarea id="question" name="question" maxlength="200" placeholder="' + msg.inputQuestionTitleHere + '"></textarea>';
	html += '				</td>';
	html += '				<td width="1%">';
	html += '					<input type="button" data-icon="myapp-camera" data-iconpos="notext" data-inline="true"/>';
	html += '				</td>';
	html += '			</tr>';
	html += '		</table>';
	html += '	</fieldset>';
	html += '';		
	html += '	<div data-role="fieldcontain">';
	html += '		<label for="questionType">' + msg.questionType + ':</label>';
	html += '		<select id="questionType" name="questionType">';
	html += '';
	if (question.type == "singleChoice") {
		html += '			<option value="singleChoice" selected>' + msg.singlechoiceTye + '</option>';
	} else {
		html += '			<option value="singleChoice">' + msg.singlechoiceTye + '</option>';
	}
	if (question.type == "multipleChoice") {
		html += '			<option value="multipleChoice" selected>' + msg.multiplechoiceType + '</option>';
	} else {
		html += '			<option value="multipleChoice">' + msg.multiplechoiceType + '</option>';
	}
	if (question.type == "rank") {
		html += '			<option value="rank" selected>' + msg.rankType + '</option>';
	} else {
		html += '			<option value="rank">' + msg.rankType + '</option>';
	}
	if (question.type == "freeText") {
		html += '			<option value="freetext" selected>' + msg.freetextType + '</option>';
	} else {
		html += '			<option value="freetext">' + msg.freetextType + '</option>';
	}
	if (question.type == "number") {
		html += '			<option value="number" selected>' + msg.numberType + '</option>';
	} else {
		html += '			<option value="number">' + msg.numberType + '</option>';
	}
	if (question.type == "5stars") {	
		html += '			<option value="5stars" selected>' + msg.starsType + '</option>';
	} else {
		html += '			<option value="5stars">' + msg.starsType + '</option>';
	}
	if (question.type == "boolean") {
		html += '			<option value="boolean" selected>' + msg.booleanType + '</option>';
	} else {
		html += '			<option value="boolean">' + msg.booleanType + '</option>';
	}
	html += '';
	html += '		</select>';
	html += '	</div>';
	html += '';	
	html += '	<div data-role="fieldcontain">';
	html += '		<label for="pollCloseDate">' + msg.closeDate + ':</label>';
	html += '		<input id="pollCloseDate" type="date" name="pollCloseDate" step="1" value="' + closeDate + '" />';
	html += '	</div>';
	html += '';		
	html += '	<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" id="answerChoiceDefinitionList">';
	html += '		<li data-role="list-divider">' + msg.addAnswerChoices + '</li>';
	html += '		<li data-role="fieldcontain" id="answerChoiceControl">';
	html += '			<div data-role="controlgroup" data-type="horizontal" data-mini="true">';
	html += '				<a href="#" id="btnAddAnswerChoiceDefinition" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="e">Add</a>';
	html += '				<a href="#" id="btnDelAnswerChoiceDefinition" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="e">Delete</a>';
	html += '			</div>';
	html += '		</li>';
	html += '	</ul>';
	html += '';		
	html += '	<div data-role="fieldcontain">';
	html += '		<a href="#" id="btnPreviewQuestionDefinition" data-role="button" data-icon="plus" data-inline="true" data-theme="e" data-mini="true">' + msg.ok + '</a>';
	html += '	</div>';				
	html += '</div>';
		
	return html;
}


/**
 * Generates the html to preview a question.
 * 
 * @param question the json object of question
 * @param msg the json object of message
 */
function getQuestionPreviewHtml(question, msg) {
	
	var type = question.type;
	var answerChoices = question.answerChoices;
	
	//alert(type);
	
	var html = '';
	html += '<div id="questionPreview">';
	html += '	<div data-role="fieldcontain">';
	html += '		<h3>' + question.question + '</h3>';
	
	if (type == "singleChoice") {
		var radioName = question.id;
		
		html += '		<fieldset data-role="controlgroup">';
		for (var i = 0; i < answerChoices.length; i++) {
			var answer = answerChoices[i];
			var answerChoiceId = "choiceAnswer" + answer.sequence;
			html += '			<input id="' + answerChoiceId + '" type="radio" name="' + radioName +'" />';
			html += '			<label for="' + answerChoiceId + '">' + answer.name + '</label>';
		}
		html += '		</fieldset>';		
	}
	else if (type == "multipleChoice") {
		html += '		<fieldset data-role="controlgroup">';
		
		for (var i = 0; i < answerChoices.length; i++) {
			var answer = answerChoices[i];
			var answerChoiceId = "choiceAnswer" + answer.sequence;
			html += '			<input id="' + answerChoiceId + '" type="checkbox" name="' + answerChoiceId +'" />';
			html += '			<label for="' + answerChoiceId + '">' + answer.name + '</label>';
		}
		html += '		</fieldset>';
	}
	else if (type == "rank") {
		var sortableId = "sortable-" + question.id;
		
		html += '(' + msg.rankGuide + ')';
		html += '		<ul data-role="listview" data-inset="true" id="' + sortableId + '">';
		
		for (var i = 0; i < answerChoices.length; i++) {
			var answer = answerChoices[i];
			var answerChoiceId = "choiceAnswer" + answer.sequence;
			html += '			<li id="' + answerChoiceId + '">' + answer.name + '</li>';
		}
		html += '		</ul>';
	}
	else if (type == "freetext") {
		html += '		<input type="text" data-inset="true" name="freetext" maxlength="500" />';
	}
	else if (type == "number") {
		html += '		<input type="number" data-inset="true" name="number" min="0" step="1" />';
	}
	else if (type == "5stars") {
		var backingId = "backing-" + question.id;
		var rateitId = "rateit-" + question.id;
		
		html += '		<input type="hidden" id="' + backingId + '">';
		html += '		<div id="' + rateitId + '" class="rateit bigstars" data-rateit-starwidth="32" data-rateit-starheight="32">'; 
		html += '		</div>';
	}
	else if (type == "boolean") {
		var radioName = question.id;
		
		html += '		<fieldset data-role="controlgroup">';
		html += '			<input id="yes" type="radio" name="' + radioName + '" />';
		html += '			<label for="yes">' + msg.yes + '</label>';
		html += '			<input id="no" type="radio" name="' + radioName + '" />';
		html += '			<label for="no">' + msg.no + '</label>';
		html += '		</fieldset>';		
	}

	html += '	</div>';
	
	html += '';	
	html += '	<div data-role="fieldcontain">';
	html += '		<a href="#" id="btnDelQuestionDefinition" data-role="button" data-icon="minus" data-inline="true" data-theme="e" data-mini="true">' + msg.del + '</a>';
	html += '		<a href="#" id="btnEditQuestionDefinition" data-role="button" data-icon="grid" data-inline="true" data-theme="e" data-mini="true">' + msg.edit + '</a>';
	html += '	</div>';				
	html += '</div>';
		
	return html;
}

function getQuestionSubmitHtml(question, msg) {
	
}


/**
 * Defines the change event of question type select.
 */
$("#questionType").live("change", function(e) {
	if ($(e.target).is("select")) {
		var selectedVal = $(this).val();
		
		var answerChoiceList = $(this).parent().parent().parent().parent().find("#answerChoiceDefinitionList");
		
		if (selectedVal == 'freetext' || selectedVal == 'number' || selectedVal == '5stars' || selectedVal == 'boolean') {
			answerChoiceList.hide("slow");
		}
		else if (selectedVal == 'singleChoice' || selectedVal == 'multipleChoice' || selectedVal == 'rank') {
			answerChoiceList.show("slow");
		}
	}
});


/**
 * Defines the click event of answer choice definition add button.
 */	
$("#btnAddAnswerChoiceDefinition").live("click", function(e) {
	var answerChoiceList = $(this).parent().parent().parent().parent().parent().find("#answerChoiceDefinitionList");
	
	var answerChoiceNum = answerChoiceList.children().length - 1;
	
	var answerChoiceId = "choice" + answerChoiceNum;
	
	var html = '<li id="choiceItem' + answerChoiceNum +'" style="padding-top:0px;padding-bottom:1px;"><fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">'
		+ '<table><tr><td width="99%">'
		+ '<input id="' + answerChoiceId + '" type="text" name="' + answerChoiceId + '" value="" maxlength="100" />'
		+ '</td><td width="1%">'
		+ '<input type="button" data-icon="search" data-iconpos="notext" data-inline="true" />'
		+ '</td></tr></table>'
		+ '</fieldset></li>';
	answerChoiceList.append(html);
	
	answerChoiceList.find("#answerChoiceControl").appendTo(answerChoiceList);
	
	answerChoiceList.trigger("create");
	answerChoiceList.listview("refresh");
});


/**
 * Defines the click event of answer choice definition delete button.
 */		
$("#btnDelAnswerChoiceDefinition").live("click", function(e) {
	var answerChoiceList = $(this).parent().parent().parent().parent().parent().find("#answerChoiceDefinitionList");
	
	var answerChoiceNum = answerChoiceList.children().length - 2;
	
	if (answerChoiceNum == 0) {
		return;
	}
	
	answerChoiceList.find("#choiceItem" + answerChoiceNum).remove();
});


function getQuestionDefinitionObject(questionId) {
	var questionDefinition = $("#" + questionId).find("#questionDefinition");
	var questionText = questionDefinition.find("#question").val();
	var type = questionDefinition.find("#questionType").val();
	var closeDate = questionDefinition.find("#pollCloseDate").val();

	var objQuestion = new Object();
	var objOptions = new Object();
	objQuestion.id = questionId;
	objQuestion.question = questionText;
	objQuestion.type = type;
	objQuestion.closeDate = closeDate;
	objQuestion.options = objOptions;

	var objAnswerChoices = new Array();
	if (type == "singleChoice" || type == "multipleChoice" || type == "rank") {
		var answerChoiceList = questionDefinition.find("#answerChoiceDefinitionList").children();
		for ( var j = 1; j < answerChoiceList.length - 1; j++) {
			var choice = $(answerChoiceList.get(j)).children().find("#choice" + j);
			var objChoice = new Object();
			objChoice.sequence = j;
			objChoice.name = choice.val();
			
			objAnswerChoices.push(objChoice);
		}		
	}
	objQuestion.answerChoices = objAnswerChoices;
	
	return objQuestion;
}

